<template>
  <van-row>
    <van-row>
        <div id="pieforrectifycompanymonitor" style="width:100%;height:350px;padding 10px 0px"></div>
    </van-row>
    <van-row>
        <table style="table-layout: fixed; border:solid 1px #cdcdcd" border="1" width="100%" cellspacing="0" cellpadding="2">

<tbody>

<tr>

<th v-for="(d, index) in stageColumnTemplate"
    :key="index"
    :index="index"
    style="text-align: left; border:solid 1px #cdcdcd">{{d}}</th>
</tr>
<tr v-for="(dt,index) in tableDataBind" :key="dt.bmmc" :index="index">
    <td style="border:solid 1px #cdcdcd">
 {{dt.bmmc}}
    </td>
    <td style="border:solid 1px #cdcdcd">
        {{dt.problem_count}}
    </td>
    <td style="border:solid 1px #cdcdcd">
        {{dt.unprocess}}
    </td>
    <td style="border:solid 1px #cdcdcd">
        {{dt.duty}}
    </td>
        <td style="border:solid 1px #cdcdcd">
 {{dt.rectify}}
    </td>
    <td style="border:solid 1px #cdcdcd">
        {{dt.approve}}
    </td>
    <td style="border:solid 1px #cdcdcd">
        {{dt.commit}}
    </td>
        <td style="border:solid 1px #cdcdcd">
 {{dt.complete}}
    </td>
    </tr>
</tbody>
        </table>
    </van-row>
  </van-row>
</template>

<script>
const echarts = require('echarts')

export default {
  name: 'DeptRectifyCompanyMonitor',
  props: ['chartData', 'tableData'],
  data () {
    return {
      echarts: null,
      options: null,
      tableDataBind: null,
      stageColumnTemplate: ['部门名称', '问题数量', '未处理', '已指定责任部门', '整改措施已制定', '安监部门已审核', '整改措施已落实', '安监部门已验收']
    }
  },
  methods: {
    renderData () {
      this.option = {
        title: {
          text: '问题整改情况分析',
          subtext: '公司层面问题',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['未处理', '已指定责任部门', '整改措施已制定', '安监部门已审核', '整改措施已落实', '安监部门已验收']
        },
        series: [
          {
            name: '整改分析',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            label: {
              formatter: '{b} : {c} ({d}%)'
            },
            data: [
              { value: 0, name: '未处理' },
              { value: 0, name: '已指定责任部门' },
              { value: 0, name: '整改措施已制定' },
              { value: 0, name: '安监部门已审核' },
              { value: 0, name: '整改措施已落实' },
              { value: 0, name: '安监部门已验收' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      this.options.series[0].data[0].value = this.chartData.unprocess
      this.options.series[0].data[1].value = this.chartData.duty
      this.options.series[0].data[2].value = this.chartData.rectify
      this.options.series[0].data[3].value = this.chartData.approve
      this.options.series[0].data[4].value = this.chartData.commit
      this.options.series[0].data[5].value = this.chartData.complete

      this.echarts.setOption(this.options)
      this.tableDataBind = this.tableData
    }
  },
  mounted () {
    this.echarts = echarts.init(document.getElementById('pieforrectifycompanymonitor'))
  }
}
</script>

<style scoped lang="less">

</style>
